<!--帮组规则查看-->
<template>
  <div>
    <div class="handle">
      <el-button type="primary" @click="addCop">添加折扣规则</el-button>
    </div>
    <div class="body">
      <el-table
        v-loading="isLoading"
        :stripe="true"
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          align="center"
          prop="gmt_create"
          label="创建时间"
        />
        <el-table-column
          align="center"
          prop="discount"
          label="折扣价格"
        />
        <el-table-column
          align="center"
          prop="size"
          label="折扣人数"
        />
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="updateCop(scope.row)">修改</el-button>
            <el-button @click="deleteCop(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="status"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="cop">
        <el-form-item label="折扣价格" label-width="120px">
          <el-input v-model="cop.discount" />
        </el-form-item>
        <el-form-item label="折扣人数" label-width="120px">
          <el-input v-model="cop.size" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="status = false">取 消</el-button>
        <el-button type="primary" @click="updateCopData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addLeader, delLeader, getGuidLeader, updateLeader } from '@/api/guildLeader'

export default {
  name: 'SelCopon',
  data() {
    return {
      status: false,
      title: '',
      list: {},
      isLoading: false,
      cop: {}
    }
  },
  async created() {
    this.isLoading = true
    await this.getList()
    this.isLoading = false
  },
  methods: {
    async getList() {
      const res = await getGuidLeader()
      this.list = res.data
    },
    // 修改折扣规则
    updateCop(row) {
      this.title = '规则修改'
      this.cop = row
      this.status = true
    },
    handleClose() {
      this.status = false
    },
    // 提交修改
    async updateCopData() {
      this.status = false
      if (this.title === '规则修改') {
        const res = await updateLeader(this.cop)
        this.$message({
          message: res.data,
          type: 'success'
        })
        await this.getList()
      }
      if (this.title === '添加规则') {
        console.log('规则添加')
        const res = await addLeader(this.cop)
        this.$message({
          message: res.data,
          type: 'success'
        })
        await this.getList()
      }
    },
    // 添加折扣规则
    addCop() {
      this.cop = {}
      this.title = '添加规则'
      this.status = true
    },
    // 删除规则
    async deleteCop(id) {
      console.log(id)
      const res = await delLeader(id)
      console.log(res)
    }
  }
}
</script>

<style scoped>
.handle {
  background-color: white;
  margin-top: 10px;
  padding: 30px 10px 10px 10px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.body{
  padding: 20px 0px;
  background-color: white;
  margin-top: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}
</style>
